<!--添加修改角色信息-->
<template>
  <a-modal v-model="showAddTable" :mask-closable="false" :closable="true" :width="1300"
           title="课堂新增"
           :footer="null"
           :maskClosable="false"
           :destroyOnClose="true">
    <a-form :form="form" @keydown.native.enter.prevent="saveApply" class="modelSearch">
      <a-row>
        <a-col span="12">
      <a-form-item label="上课日期：" prop="startTime" v-bind="formStyle">
        <a-date-picker
            format="YYYY-MM-DD"
            placeholder="上课时间"
            style="width: 100%"
            @change="onSelectDate"
            v-decorator="['startTime', { rules: [{ required: false, message: '选择上课时间' }] }]"
        />
      </a-form-item>
        </a-col>
      <a-col span="12">
      <a-form-item label="上课时间：" v-bind="formStyle">
        <a-checkbox-group v-model="slotList"
                          @change="onSelectSlot"
                          v-decorator="['slotList', { rules: [{ required: false, message: '选择不上课时间' }] }]"
        >
          <a-row colspan="25" style="width: 500px">
            <a-col :span="5">
              <a-checkbox :value="Number('1')">上午</a-checkbox>
            </a-col>
            <a-col :span="5">
              <a-checkbox :value="Number('2')">下午</a-checkbox>
            </a-col>
          </a-row>
        </a-checkbox-group>
      </a-form-item>
      </a-col>
      </a-row>
    </a-form>
    <a-table style="height: 400px;overflow-y: auto" :columns="columns" :dataSource="courseSelectList" :rowKey="record => record.recordId"
             :pagination="false">
                <span slot="index" slot-scope="text, record, index">
                    {{ index + 1 }}
                </span>
      <span slot="attendTime" slot-scope="text, record, index">
                    {{ moment(record.date).format('YYYY-MM-DD') + ' ' + moment(record.date + ' ' + record.attendTime).format('HH:mm') + ' - ' + moment(record.date + ' ' + record.finishTime).format('HH:mm') }}
                </span>
      <span slot="operation" slot-scope="text, record, index" class="table-operation">
                         <a @click="saveApply(record)" v-if="hasPermission ('course:scheduling:saveSchedule')">
                            选课</a>
                </span>
    </a-table>
  </a-modal>
</template>

<script>
import verify from 'libs/verify'
import AFormItem from 'ant-design-vue/es/form/FormItem'
import {validateID} from "@/libs/validate";
import moment from "moment";

export default {
  name: 'addSchedule',
  components: {
    AFormItem,
  },
  data() {
    return {
      verify,
      form: this.$form.createForm(this),
      showAddTable: false,
      input: false,
      selectCourseId: "",
      realStartTime: "",
      startTime: "",
      courseObj: {},
      slotList: [],
      courseSelectList: [],
      scheduleSelectList: [],
      columns: [
        {title: '序号', key: 'index', width: '8%', align: 'center', scopedSlots: {customRender: 'index'}},
        {title: '课程名称', dataIndex: 'courseName', key: 'courseName', width: '15%'},
        {title: '所在实验室', dataIndex: 'classroomName', key: 'classroomName', width: '15%'},
        {title: '教师姓名', dataIndex: 'teacherName', key: 'teacherName', width: '10%'},
        {title: '已选课人数', dataIndex: 'scheduleStuCount', key: 'scheduleStuCount', width: '10%'},
        {title: '允许上课人数', dataIndex: 'allowStuCount', key: 'allowStuCount', width: '10%'},
        {title: '上课时间', dataIndex: 'attendTime', key: 'attendTime', scopedSlots: {customRender: 'attendTime'}},
        {title: '操作', key: 'operation', width: '10%', scopedSlots: {customRender: 'operation'}}
      ],
    }
  },
  computed: {
    moment() {
      return moment
    },
    formStyle() {
      return this.$store.state.common.formStyle
    }
  },
  props: {},
  watch: {},
  methods: {
    validateID,
    /**
     * Function    : saveApply
     * Description : 打开弹框
     * Input       : none
     * Return      : none
     */
    showModal() {
      this.showAddTable = true
      this.getNotFullCourseList('', [])
    },
    selectCourse(value) {
      let _this = this;
      let courseSelectList = _this.courseSelectList;
      for (let index in courseSelectList) {
        if (courseSelectList[index].courseId === value) {
          this.courseObj = courseSelectList[index]
          return
        }
      }
    },
    onSelectDate(date) {
      this.startTime = date
      this.getNotFullCourseList(this.startTime, this.slotList)
    },
    onSelectSlot(slots) {
      this.getNotFullCourseList(this.startTime, this.slotList)
    },
    getNotFullCourseList(date, slots) {
      this.selectCourseId = ''
      this.courseSelectList = []
      let _this = this
      setTimeout(function () {
        _this.form.resetFields(['selectCourseId'])
      }, 100)
      let para = {
        startDate: date ? moment(date).format("YYYY-MM-DD") : '',
        slots: slots && slots.length > 0 ? slots.join() : ''
      }
      this.$store.dispatch('getNotFullCourseListAct', para).then(response => {
        if (response.code === 0) {
          this.courseSelectList = response.data
        } else {
          this.$message.error(response.message)
        }
      })
    },
    /**
     * Function    : showEdit
     * Description : 编辑时显示
     * Input       : opt单个所有数据
     * Return      : none
     */
    showEdit(opt) {
      this.showAddTable = true
      this.selectScheduleId = opt.scheduleId
      this.id = opt.recordId
      this.realStartTime = moment(opt.realStartTime).format("YYYY-MM-DD HH:mm")
      this.$nextTick(() => {
        this.form.setFieldsValue(this.$pick({
          selectScheduleId: this.selectScheduleId,
          realStartTime: this.realStartTime
        }, ['selectScheduleId', 'realStartTime']))
      })
    },

    /**
     * Function    : saveApply
     * Description : 角色信息新增、编辑保存
     * Input       : name
     * Return      : none
     */
    saveApply(courseObj) {
      let para = {}
      para.courseId = courseObj.courseId
      para.classroomId = courseObj.classroomId
      para.date = courseObj.date
      para.attendTime = courseObj.attendTime
      para.finishTime = courseObj.finishTime
      para.slot = courseObj.slot
      this.$store.dispatch('saveScheduleAct', para).then(response => {
        if (response.code === 0) {
          this.showAddTable = false
          this.$emit('init')
          this.$message.success(response.message)
        } else {

          this.$message.error(response.message)
        }
      })
    },

    /**
     * Function    : cancelApply
     * Description : 取消弹出框
     * Input       : val
     * Return      : none
     */
    cancelApply() {
      this.showAddTable = false
      let _this = this
      _this.selectCourseId = ''
      _this.slotList = []
      _this.courseSelectList = []
      setTimeout(function () {
        _this.form.resetFields()
      }, 100)
    },
    getScheduleList() {
      let _this = this;
      _this.$store.dispatch('getScheduleListAct', {courseObject: '1'}).then(response => {
        if (response.code === 0) {
          let data = response.data;
          for (let index in data) {
            let courseTime = moment(data[index].date).format("YYYY-MM-DD") + " " + data[index].attendTime + "-" + data[index].finishTime
            _this.scheduleSelectList.push({
              value: data[index].id,
              label: data[index].className + "  " + data[index].courseName + '【' + courseTime + '】',
            })
          }
        } else {
          _this.$message.error(response.message)
        }
      })
    },

  },


  created() {
    this.getScheduleList()
  }
}
</script>
